import React, { useState, useEffect, useRef } from 'react';
import { Comment, List, Tooltip, Input, Button } from 'antd';
import styles from './index.less';
import { saveComment } from '@/services/okr'
const { TextArea } = Input;

const CommentPart = (props) => {
  const [commentVal, setCommentVal] = useState('');
  const { commemt = [], okrId, updateCommentList } = props;
  const handleChangeComment = (e) => {
      setCommentVal(e.target.value)
  }
  const saveCommentFun = () => {
     saveComment({okrId, comment: commentVal, remark: ''}).then((res)=>{
        if(res.code == '200'){
            setCommentVal('')
            updateCommentList(okrId)
         }
     });
    
  }

  return (
      <div>
        <List
            className="comment-list"
            header={`${commemt.length} comment`}
            itemLayout="horizontal"
            dataSource={commemt}
            renderItem={item => (
            <li>
                <Comment
                actions={item.actions}
                author={item.commentator}
                avatar={item.avatar}
                content={item.comment}
                datetime={`${item.commentdate} ${item.commenttime}`}
                />
            </li>
            )}
        />
        <TextArea style={{margin: '10px', width: '90%'}} placeholder='留下您的宝贵意见吧~' onChange={handleChangeComment}  value={commentVal} />
        <Button style={{margin: '10px'}} type='primary' onClick={saveCommentFun}>提交评论</Button>
      </div>
    
  );
};

export default CommentPart;
